<template>
	<view class="content">
		<view class="row xcdd">
			<view class="col-24">
				<view class="row ddkt">
					<view class="col-18">
						我的行程
					</view>
					<view class="col-6">
						<button type="primary" @click="$public.navTo('account/account_shdd')">
							{{orderDetail == '' ? '选择订单' : '切换订单'}}
						</button>
					</view>
				</view>
				<view class="row ddxq" v-if="orderDetail != ''">
					<view class="col-24">
						<view class="row ycqk">
							<view class="col-18">
								约车 {{orderDetail.createTime}}
							</view>
							<view class="col-6 t_right t_size_26">
								{{orderDetail.orderType == 1 ? orderDetail.orderTypeText : orderDetail.orderStateInsideText}}
							</view>
						</view>
					</view>
					<view class="col-24">
						<view class="row ycqzdd"> <!--约车起止地点-->
							<view class="col-2 qztb"><!--图标-->
								<view class="col-24 qdtb bott_bold t_center">
									·
								</view>
								<view class="col-24 tbsx">
									
								</view>
								<view class="col-24 zdtb bott_bold t_center">
									·
								</view>
							</view>
							<view class="col-22 qzdd"><!--起止地点-->
								<view class="col-24 qdmc">
									{{orderDetail.getOnPoint}}
								</view>
								<view class="col-24 zdmc">
									{{orderDetail.getOffPoint}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="row czmb">
			<view class="col-22 pdl-1 pdr-1 mbmc t_size_bold">
				服务类型
			</view>
			<view class="col-22 pdl-1 pdr-1 list">
				<view class="row"
				 v-for="(item,index) in typeList" :key="index"
				 @click="$public.navTo('account/account_wtxq?typeId=' + item.typeId + '&orderId=' + orderDetail.orderId)">
					<view class="col-2">
						<image :src="item.icon" mode="heightFix"></image>
					</view>
					<view class="col-19">
						{{item.title}}
					</view>
					<view class="col-3 t_right">
						<text class="iconfont icon-youjiantou"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="row czmb">
			<view class="col-22 pdl-1 pdr-1 mbmc t_size_bold">
				其他功能
			</view>
			<view class="col-22 pdl-1 pdr-1 list">
				<view class="row" @click="$public.navTo('account/account_cljdcx')">
					<view class="col-2">
						<image src="../../static/account/cxcljd.png" mode="heightFix"></image>
					</view>
					<view class="col-19">
						查询处理进度
					</view>
					<view class="col-3 t_right">
						<text class="iconfont icon-youjiantou"></text>
					</view>
				</view>
				<view class="row" @click="telPhone()">
					<view class="col-2">
						<image src="../../static/account/lxkf.png" mode="heightFix"></image>
					</view>
					<view class="col-19">
						联系客服
					</view>
					<view class="col-3 t_right">
						<text class="iconfont icon-youjiantou"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: mapState(['serviceTel']),
		data(){
			return {
				orderDetail: {
					createTime: "",
					getOffPoint: "",
					getOnPoint: "",
					orderStateInsideText: "",
					orderType: 1,
					orderTypeText: "",
					orderAmount: 0.01,
					orderId: 970
				},
				typeList: []
			}
		},
		onShow() {
			this.orderDetail = uni.getStorageSync('orderDetail');
			if(this.orderDetail){
				this.load()
			}
		},
		methods:{
			async load(){
				let res = await this.$api.request(this.$api.customer.typeandinfo,{orderId: this.orderDetail.orderId});
				if(res){
					this.typeList = res.serviceTypeList;
				}
			},
			telPhone(){
				uni.makePhoneCall({
					phoneNumber: this.serviceTel
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
	.content{
		padding: 21rpx 0;
	}
	.xcdd{
		background-color: #FFFFFF;
		.ddkt{
			width: 92%;
			padding: 0 4%;
			height: 96rpx;
			line-height: 96rpx;
			border-bottom: 1px solid #ededed;
			button{
				padding: 0;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 30rpx;
				font-size: 28rpx;
				margin-top: 18rpx;
				background-color: #6CBF30;
			}
		}
		.ddxq{
			width: 92%;
			padding: 20rpx 4%;
			.ycqk{
				height: 41rpx;
				line-height: 41rpx;
				font-size: 30rpx;
				color: #333333;
				.col-6{
					color: #B3B3B3;
				}
			}
			.ycqzdd{
				height: 124rpx;
				.qztb{
					.qdtb,
					.zdtb{
						height: 50rpx;
						line-height: 50rpx;
						font-size: 95rpx;
						vertical-align: bottom;
					}
					.zdtb{
						line-height: 25rpx;
					}
					.tbsx{
						width: 1px;
						height: 40rpx;
						border-left: 1px dotted #999999;
						margin-left: calc((100% - 1px) / 2);
					}
				}
				.qzdd{
					height: 120rpx;
					padding: 9.5rpx 0;
					color: #333333;
					.qdmc{
						height: 50rpx;
						line-height: 50rpx;
					}
					.zdmc{
						height: 70rpx;
						line-height: 90rpx;
					}
				}
			}
		}
	}
	.czmb{
		background-color: #FFFFFF;
		margin-top: 21rpx;
		.mbmc{
			height: 96rpx;
			line-height: 96rpx;
			color: #333333;
			border-bottom: 1px solid #ededed;
		}
		.list{
			padding-bottom: 20rpx;
			view{
				height: 40rpx;
				line-height: 40rpx;
				padding: 20rpx 0;
				color: #333333;
				image{
					height: 40rpx;
				}
			}
		}
	}
</style>
